<template>
  <div>
    <div class="flip-icon" @click="clickIcon">
      <i class="el-icon-s-unfold"></i>
    </div>

    <!-- 下拉菜单 -->
    <el-menu
      default-active="1-1"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1" @click="navigateTo('tableView')">表格</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <span slot="title">记事本</span>
          <el-menu-item index="1-4-1" @click="navigateTo('notepadEnter')">录入</el-menu-item>
          <el-menu-item index="1-4-2" @click="navigateTo('notepadView')">查看</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2" @click="navigateTo('summarize')">
        <i class="el-icon-setting"></i>
        <span>总结</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'Aside',
  data() {
    return {
      isCollapse: true,
    };
  },

  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 点击图标，发生旋转
    clickIcon() {
      this.isCollapse = !this.isCollapse;

      const icon = document.querySelector('.flip-icon');
      icon.classList.toggle('rotate');
    },
    // 进行路由跳转
    navigateTo(routeName) {
      // 检查当前路由是否与即将导航的路由相同
      if (this.$route.name !== routeName) {
        // 执行导航
        this.$router.push({ name: routeName });
      }
    },
  },
};
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.flip-icon {
  border: 1px solid;
  transition: transform 0.3s ease;
}

.flip-icon.rotate {
  transform: rotate(180deg);
}
</style>
